<!-- 交互设备 -->
<template>
  <div class="main-conent-minheight">
    <div class="el-card__body" v-if="interactionShow">
      <el-table
        :data="filteredData"
        border
        :row-class-name="tableRowClassName"
        :row-style="clickstyle"
        @row-click="rowClick"
        v-loading="loading"
        style="width: 98%; font-size: 14px"
        :height="tableHeight"
        :header-cell-style="{
          'text-align': 'left',
          color: '#000',

          'border-color': '#ccffff',
          background: '#CCFFFF',
        }"
        :cell-style="{ 'text-align': 'left', 'border-color': '#ffffff00' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" width="120">
          <template scope="scope">
            <span v-if="scope.$index + 1 < 10">00{{ scope.$index + 1 }}</span>
            <span v-if="scope.$index + 1 > 9 && scope.$index + 1 < 100"
              >0{{ scope.$index + 1 }}</span
            >
            <span v-if="scope.$index + 1 > 99">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column>
          <template slot="header">
            MAC
            <!-- 点击搜索框1 -->
            <el-popover placement="bottom" trigger="click">
              <MACinput @filtermac="filtermacTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <!-- 点颜色 -->
            <div
              style="margin-left: -20px"
              class="dot"
              :style="scope.row.online ? 'background:#0d0' : 'background:#aaa'"
            ></div>
            <span>{{ scope.row.dev_id }}</span>
          </template>
        </el-table-column>

        <el-table-column>
          <template slot="header">
            设备类型
            <!-- 点击搜索框2 -->
            <el-popover placement="bottom" trigger="click">
              <FacilityTypeinput @filter="filterTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <span align="center" v-if="show"
              >{{ scope.row.dev_type_name || "--" }}<br />
              {{ scope.row.proto }}
              {{ `/ v${scope.row.fw_version}` }}
            </span>
            <el-input
              v-model="scope.row.dev_type_name"
              type="text"
              placeholder="输入设备名称"
              v-else
            />
          </template>
        </el-table-column>

        <el-table-column>
          <template slot="header">
            设备名称
            <!-- 点击搜索框3 -->
            <el-popover placement="bottom" trigger="click">
              <FacilityNameinput @filtername="filternameTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <span align="center" v-if="show"
              >{{ scope.row.name || "--" }}
            </span>
            <el-input
              v-model="scope.row.name"
              type="text"
              placeholder="输入设备名称"
              v-else
            />
          </template>
        </el-table-column>

        <el-table-column prop="address" label="生产批次号">
          <template slot="header">
            所在空间
            <!-- 点击搜索框4 -->
            <el-popover placement="bottom" trigger="click">
              <LocationSpaceinput @filterspace="filterspaceTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <span v-if="show">{{ scope.row.area.name || "--" }}</span>
            <el-input
              v-model="scope.row.address"
              type="text"
              placeholder="选择空间"
              v-else
            />
          </template>
        </el-table-column>
        <el-table-column prop="address2" label="生产批次号">
          <template slot="header">
            图位编号
            <!-- 点击搜索框5 -->
            <el-popover placement="bottom" trigger="click">
              <MapNumberinput @filterposition="filterpositionTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <span v-if="show">{{ scope.row.position }}</span>
            <el-input
              v-model="scope.row.position"
              type="text"
              v-else
              placeholder="输入编号"
            />
          </template>
        </el-table-column>

        <el-table-column prop="address" label="功能" width="110">
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              width="300"
              trigger="click"
              v-if="scope.row.interactive_show_bind_page"
            >
              <div v-if="!scope.row.dev_type_name.includes('温控')">
                <div class="popover1">
                  <div class="popover1-top">
                    <span
                      class="panel-button"
                      @click="triggerKey(scope.row.panel_button_infos[0])"
                      >{{
                        scope.row.panel_button_infos[0]
                          ? scope.row.panel_button_infos[0].button_name
                            ? scope.row.panel_button_infos[0].button_name
                            : "按键1"
                          : "按键1"
                      }}</span
                    >
                    <span
                      class="panel-button"
                      @click="triggerKey(scope.row.panel_button_infos[1])"
                      >{{
                        scope.row.panel_button_infos[1]
                          ? scope.row.panel_button_infos[1].button_name
                            ? scope.row.panel_button_infos[1].button_name
                            : "按键2"
                          : "按键2"
                      }}</span
                    >
                  </div>
                  <div class="popover1-bottom">
                    <span
                      class="panel-button"
                      @click="triggerKey(scope.row.panel_button_infos[2])"
                      >{{
                        scope.row.panel_button_infos[2]
                          ? scope.row.panel_button_infos[2].button_name
                            ? scope.row.panel_button_infos[2].button_name
                            : "按键3"
                          : "按键3"
                      }}</span
                    >
                    <span
                      class="panel-button"
                      @click="triggerKey(scope.row.panel_button_infos[3])"
                      >{{
                        scope.row.panel_button_infos[3]
                          ? scope.row.panel_button_infos[3].button_name
                            ? scope.row.panel_button_infos[3].button_name
                            : "按键4"
                          : "按键4"
                      }}</span
                    >
                  </div>
                </div>
                <div class="popover2">
                  <div class="popover1-top">
                    <span
                      class="panel-button"
                      @click="triggerKey(scope.row.panel_button_infos[4])"
                      style="background-color: #fffff0; height: 25px"
                      >{{
                        scope.row.panel_button_infos[4]
                          ? scope.row.panel_button_infos[4].button_name
                            ? scope.row.panel_button_infos[4].button_name
                            : "按键5"
                          : "按键5"
                      }}</span
                    >
                    <span
                      class="panel-button"
                      @click="triggerKey(scope.row.panel_button_infos[5])"
                      >{{
                        scope.row.panel_button_infos[5]
                          ? scope.row.panel_button_infos[5].button_name
                            ? scope.row.panel_button_infos[5].button_name
                            : "按键6"
                          : "按键6"
                      }}</span
                    >
                  </div>
                  <div class="popover1-bottom">
                    <span
                      class="panel-button"
                      @click="triggerKey(scope.row.panel_button_infos[6])"
                      >{{
                        scope.row.panel_button_infos[6]
                          ? scope.row.panel_button_infos[6].button_name
                            ? scope.row.panel_button_infos[6].button_name
                            : "按键7"
                          : "按键7"
                      }}</span
                    >
                    <span>
                      <span
                        class="panel-button"
                        @click="triggerKey(scope.row.panel_button_infos[7])"
                        >{{
                          scope.row.panel_button_infos[7]
                            ? scope.row.panel_button_infos[7].button_name
                              ? scope.row.panel_button_infos[7].button_name
                              : "按键8"
                            : "按键8"
                        }}</span
                      >
                    </span>
                  </div>
                </div>
              </div>

              <div class="panel-area" v-else>
                <div class="panels">
                  <div class="two-panel">
                    <div>空调</div>
                    <div>新风</div>
                  </div>
                  <div class="two-panel">
                    <div>恒温</div>
                    <div>增加</div>
                  </div>
                </div>
                <div class="space"></div>
                <div class="panels">
                  <div class="two-panel">
                    <div>模式</div>
                    <div>减少</div>
                  </div>
                  <div class="two-panel">
                    <div>地暖</div>
                    <div>档位</div>
                  </div>
                </div>
                <div class="temp">
                  {{
                    scope.row.panel_button_infos.find((x) => {
                      return x.btn_func_name == "空调";
                    }).current_temp / 10
                  }}°C
                </div>
              </div>

              <div style="float: right; margin-top: 10px">
                <el-button type="primary" @click="setInteraction(scope.row)"
                  >设置交互</el-button
                >
              </div>
              <el-button
                type="text"
                slot="reference"
                size="small"
                @click="addparameter()"
                >交互</el-button
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-else class="set-interaction">
      <div class="set-interactionTop">
        <div class="set-interactionTop-left">
          <div class="popover1">
            <div class="popover1-top">
              <span
                :style="
                  interactionShow === true ? 'color:#34363ce1' : 'color:#2E6DEf'
                "
                @click="triggerKey(thisRow.panel_button_infos[0])"
                >{{
                  thisRow.panel_button_infos[0]
                    ? thisRow.panel_button_infos[0].button_name
                      ? thisRow.panel_button_infos[0].button_name
                      : "按键1"
                    : "按键1"
                }}
              </span>
              <span @click="triggerKey(thisRow.panel_button_infos[1])">{{
                thisRow.panel_button_infos[1]
                  ? thisRow.panel_button_infos[1].button_name
                    ? thisRow.panel_button_infos[1].button_name
                    : "按键2"
                  : "按键2"
              }}</span>
            </div>
            <div class="popover1-bottom">
              <span @click="triggerKey(thisRow.panel_button_infos[2])">{{
                thisRow.panel_button_infos[2]
                  ? thisRow.panel_button_infos[2].button_name
                    ? thisRow.panel_button_infos[2].button_name
                    : "按键3"
                  : "按键3"
              }}</span>
              <span @click="triggerKey(thisRow.panel_button_infos[3])">{{
                thisRow.panel_button_infos[3]
                  ? thisRow.panel_button_infos[3].button_name
                    ? thisRow.panel_button_infos[3].button_name
                    : "按键4"
                  : "按键4"
              }}</span>
            </div>
          </div>
          <div class="popover2">
            <div class="popover1-top">
              <span @click="triggerKey(thisRow.panel_button_infos[4])">{{
                thisRow.panel_button_infos[4]
                  ? thisRow.panel_button_infos[4].button_name
                    ? thisRow.panel_button_infos[4].button_name
                    : "按键5"
                  : "按键5"
              }}</span>
              <span @click="triggerKey(thisRow.panel_button_infos[5])">{{
                thisRow.panel_button_infos[5]
                  ? thisRow.panel_button_infos[5].button_name
                    ? thisRow.panel_button_infos[5].button_name
                    : "按键6"
                  : "按键6"
              }}</span>
            </div>
            <div class="popover1-bottom">
              <span @click="triggerKey(thisRow.panel_button_infos[6])">{{
                thisRow.panel_button_infos[6]
                  ? thisRow.panel_button_infos[6].button_name
                    ? thisRow.panel_button_infos[6].button_name
                    : "按键7"
                  : "按键7"
              }}</span>
              <span @click="triggerKey(thisRow.panel_button_infos[7])">{{
                thisRow.panel_button_infos[7]
                  ? thisRow.panel_button_infos[7].button_name
                    ? thisRow.panel_button_infos[7].button_name
                    : "按键8"
                  : "按键8"
              }}</span>
            </div>
          </div>
        </div>
        <div class="set-interactionTop-center">
          <div class="txt">
            <div class="text1">
              <span>设备名称</span>
              <span
                style="
                  font-size: 18px;
                  font-weight: 600;
                  color: blue;
                  margin-left: 30px;
                "
                >{{ thisRow.name }}</span
              >
            </div>
            <div class="text2">
              <span>设备类型</span>
              <span style="color: #373a41; margin-left: 30px">
                {{ thisRow.dev_type_name || "--" }}<br />
                {{ thisRow.proto }}
                {{ `/ v${thisRow.fw_version}` }}
              </span>
            </div>
          </div>
          <div class="txt">
            <div class="text1">
              <span>MAC </span>
              <span
                style="
                  float: left;
                  color: #373a41;
                  width: 50%;
                  margin-left: 54px;
                "
                >{{ thisRow.dev_id }}</span
              >
            </div>
            <div class="text2">
              <span>所在空间 </span>
              <span style="color: #373a41; width: 50%; margin-left: 30px">
                {{ thisRow.area.name }}
              </span>
            </div>
          </div>
          <div class="txt">
            <div class="text1">
              <span>图位编号 </span>
              <span style="color: #373a41; width: 50%; margin-left: 30px">{{
                thisRow.position || "--"
              }}</span>
            </div>
          </div>
        </div>
        <div class="set-interactionTop-right">
          <div style="position: absolute; top: 0; right: 20px">
            <i class="el-icon-back" @click="interactionShow = !interactionShow">
              <el-button type="text" style="color: black; font-size: 18px"
                >返回</el-button
              >
            </i>
          </div>
          <div style="position: absolute; bottom: 5px; right: 20px">
            <el-button
              :type="thisRow.online ? 'primary' : 'info'"
              :disabled="!thisRow.online"
              @click="saveEdit(thisRow.panel_button_infos)"
              >保存编辑</el-button
            >
          </div>
        </div>
      </div>
      <div class="set-interactionBottom">
        <el-table
          :data="thisRow.panel_button_infos"
          v-loading="loading"
          border
          :height="tableHeight2"
          style="width: 98%; font-size: 14px"
          :row-class-name="tableRowClassName1"
          :row-style="selectedstyle"
          @row-click="rowClick1"
          ref="table"
          :header-cell-style="{
            'text-align': 'center',
            color: '#000',
            'border-color': '#ccffff',
            background: '#CCFFFF',
          }"
          :cell-style="{ 'text-align': 'center', 'border-color': '#ffffff00' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="序号" width="80">
            <template scope="scope">
              <span v-if="scope.$index + 1 < 10">00{{ scope.$index + 1 }}</span>
              <span v-if="scope.$index + 1 > 9 && scope.$index + 1 < 100"
                >0{{ scope.$index + 1 }}</span
              >
              <span v-if="scope.$index + 1 > 99">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column label="按键名称">
            <template scope="scope">
              <!-- v-if="!scope.row.button_name.includes('温控')" -->
              <el-input
                :disabled="!scope.row.can_edit_bind"
                v-model="scope.row.button_name"
                @change="changeName(scope.row)"
                placeholder="请输入. . ."
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column label="目标空间">
            <template scope="scope">
              <el-select
                filterable
                :disabled="!scope.row.can_edit_bind"
                v-model="scope.row.target_area.area_id"
                @click="changeObjList(row)"
              >
                <el-option label="全部空间" :value="-1"></el-option>
                <el-option
                  v-for="item in options"
                  :key="item.area_id"
                  :label="item.name"
                  :value="item.area_id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="目标类型">
            <template scope="scope">
              <el-select
                filterable
                placeholder="请选择. . ."
                :disabled="!scope.row.can_edit_bind"
                v-model="scope.row.bind_type"
                @change="changeMutual(scope.row)"
              >
                <el-option
                  v-for="item in bindname"
                  :key="item.bind_type"
                  :label="item.bind_type_name"
                  :value="item.bind_type"
                >
                </el-option>
                <el-option label="(空)" :value="-1" disabled> </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="控制目标">
            <template scope="scope">
              <el-select
                v-if="scope.row.bind_key !== ''"
                filterable
                :disabled="!scope.row.can_edit_bind"
                v-model="scope.row.bind_key"
                @change="changegl"
              >
                <el-option
                  v-for="item in scope.row.bindObjsList"
                  :key="item.bind_key"
                  :label="item.name"
                  :value="item.bind_key"
                >
                </el-option>
                <el-option label="(空)" :value="-1" disabled></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="执行动作">
            <template scope="scope">
              <el-select
                v-if="
                  scope.row.bind_cmd == 0 ||
                  scope.row.bind_cmd == 1 ||
                  scope.row.bind_cmd == 2 ||
                  scope.row.bind_cmd == 3 ||
                  scope.row.bind_cmd == 4
                "
                :disabled="!scope.row.can_edit_bind"
                filterable
                v-model="scope.row.bind_cmd"
              >
                <!-- 我是绑定值{{ bindKeyInfo }}

                我是绑定值{{ scope.row.bind_type }} -->
                <el-option
                  v-for="item in bindKeyInfo.find((x) => {
                    return x.bind_type == scope.row.bind_type;
                  }).bind_cmd_list"
                  :key="item.bind_cmd"
                  :label="item.bind_cmd_name"
                  :value="item.bind_cmd"
                  :disabled="!scope.row.can_edit_bind"
                >
                </el-option>
                <el-option label="(空)" :value="-1" disabled></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import MACinput from "@/components/cominput/MACinput.vue";
import Api from "../../api/api";
import LocationSpaceinput from "@/components/cominput/LocationSpaceinput.vue";
import FacilityNameinput from "@/components/cominput/FacilityNameinput.vue";
import FacilityTypeinput from "@/components/cominput/FacilityTypeinput.vue";
import MapNumberinput from "@/components/cominput/MapNumberinput.vue";

export default {
  components: {
    MACinput,
    LocationSpaceinput,
    FacilityTypeinput,
    FacilityNameinput,
    MapNumberinput,
  },
  data() {
    return {
      loading: false, //加载动画
      interactionShow: true,
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      tableHeight: window.innerHeight - 150,
      tableHeight2: window.innerHeight - 350,
      currentId: "",
      options: [],
      bindingsdata: [],
      bindKeyInfo: [],
      bindname: [],
      thisRow: {},
      input: "",
      tableData: [], //表格数据
      filteredData: [], //表格数据
      show: true,
      state: "",
      showTheModule: false, //弹窗状态
      value: "",
      selectAll: "",
      getIndex: "",
      getIndex1: "",
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  async created() {
    let res = await Api.query_areas({ params: { sid: this.localSid } });
    let res2 = await Api.query_all_not_execute_device_detail({
      id: 6,
      params: { sid: this.localSid },
    });
    console.log("整个主接口数据源>", res2);
    let res3 = await Api.get_binding_info_list_with_cmd({
      params: { sid: this.localSid },
    });
    console.log("数据lo>", this.bindKeyInfo);
    this.bindKeyInfo = res3.result.binding_info_list;
    let res4 = await Api.get_binding_info_list({
      params: { sid: this.localSid },
    });
    this.bindname = res4.result.binding_info_list;

    console.log("目标类型数据>", this.bindname);
    this.tableData = res2.result.device_list;
    this.filteredData = JSON.parse(JSON.stringify(this.tableData));

    this.tableData.forEach((x) => {
      this.$set(x, "visible", false);
      this.$set(x, "editMode", false);
      this.$set(x, "showPopArea", false);
      this.$set(x, "isHighLight", false);
      this.$set(x, "popVisible", false);
    });
    function compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    }
    this.filteredData.sort(compare("online"));

    this.options = res.result.areas;
    console.log("options", this.options);
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  watch: {
    tableData: function (newVal, oldVal) {
      // console.log(newVal, oldVal);
      if (newVal !== oldVal) {
        this.sortByAge();
      }
    },
  },
  methods: {
    filtermacTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.tableData));
      } else {
        this.filteredData = this.tableData.filter((row) => {
          return row.dev_id.includes(keywords);
        });
      }
    },
    filterTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.tableData));
      } else {
        this.filteredData = this.tableData.filter((row) => {
          return row.dev_type_name.includes(keywords);
        });
      }
      // this.filteredData = this.tableData.filter((row) => {
      //   return row.proto.includes(keywords);
      // });
      // this.filteredData = this.tableData.filter((row) => {
      //   return row.fw_version.includes(keywords);
      // });
    },
    filternameTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.tableData));
      } else {
        this.filteredData = this.tableData.filter((row) => {
          return row.name.includes(keywords);
        });
      }
    },
    filterspaceTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.tableData));
      } else {
        this.filteredData = this.tableData.filter((row) => {
          return row.area.name.includes(keywords);
        });
      }
    },
    filterpositionTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.tableData));
      } else {
        this.filteredData = this.tableData.filter((row) => {
          return row.position.includes(keywords);
        });
      }
    },

    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },

    sortByAge: function () {
      // for (var i = 0; i < this.tableData.length - 1; i++) {
      this.tableData.sort(function (a, b) {
        return b.online - a.online;
      });
      // }
    },

    handleSelectionChange() {},
    // 编辑设备
    editQuipment() {
      this.show = false;
    },
    // 取消保存
    cancelSave() {
      this.show = true;
    },
    // 删除设备
    delEquipment() {},
    // 保存设置
    saveSet() {
      this.show = true;
    },
    // 交互
    addparameter() {
      // this.row = row;
      // this.index = index;
    },
    // 设置交互
    setInteraction(row) {
      console.log("this.thisRow>>", row);
      this.thisRow = row;
      this.bindingsdata = row.endpoints;
      console.log("数据>>>>>>", this.bindingsdata);
      this.interactionShow = false;
      this.currentId = row.dev_id;
      row.panel_button_infos.forEach(async (x) => {
        let res = await Api.query_device_bind_interactive_objs({
          params: {
            area_id: x.target_area.area_id,
            sid: this.localSid,
            dev_type: x.src_dev_type,
            bind_type: x.bind_type,
          },
        });
        console.log("res>", res.result.bind_interactive_objs);
        this.$set(x, "bindObjsList", res.result.bind_interactive_objs);
        this.$set(x, "bind_cmd", x.bind_cmd);
      });
    },
    changeName(row) {
      console.log(row);
      Api.update_device_button_name({
        params: {
          sid: this.localSid,
          dev_id: row.src_dev_id,
          button_position: row.button_position,
          button_name: row.button_name,
        },
      });
    },
    async changeObjList(row) {
      let params = {
        area_id: row.target_area.area_id,
        sid: this.localSid,
        dev_type: row.src_dev_type,
        bind_type: row.bind_type,
      };
      if (params.area_id == -1) {
        Reflect.deleteProperty(params, "area_id");
      }
      let res = await Api.query_device_bind_interactive_objs({
        params,
      });
      this.$set(row, "bindObjsList", res.result.bind_interactive_objs);
    },
    async changeMutual(row) {
      row.bind_key = "";
      row.bind_cmd = -1;
      let params = {
        area_id: row.target_area.area_id,
        sid: this.localSid,
        dev_type: row.src_dev_type,
        bind_type: row.bind_type,
      };
      if (params.area_id == -1) {
        Reflect.deleteProperty(params, "area_id");
      }
      let res = await Api.query_device_bind_interactive_objs({
        params,
      });
      this.$set(row, "bindObjsList", res.result.bind_interactive_objs);
    },

    async triggerKey(val) {
      // console.log(val);
      if (val.dst_addr_mode == 0) {
        let dev_id = val.dst_dev_id;
        let dev_type = val.dst_dev_type;
        let dev_ep_id = val.dst_dev_id;
        let bind_type = val.bind_type;
        let bind_cmd = val.bind_cmd;
        let obj = JSON.parse(
          JSON.stringify(
            this.bindKeyInfo.find((x) => {
              return x.bind_type == bind_type;
            })
          )
        );
        let cmd = obj.bind_cmd_list.find((x) => {
          return x.bind_cmd == bind_cmd;
        });
        let cmd_type = obj.cmd_type;
        console.log(cmd);
        await Api.send_command_data({
          params: {
            sid: this.localSid,
            dev_id,
            dev_type,
            dev_ep_id,
            cmd,
            cmd_type,
          },
        });
      }
      // if (val.dst_addr_mode == 1) {
      // }
      // if (val.dst_addr_mode == 2) {
      // }
    },

    changegl(val) {
      let dev_id = JSON.parse(JSON.stringify(val)).substring(12);
      console.log(dev_id);
    },
    // 保存编辑
    async saveEdit(row) {
      console.log("保存编辑的数据", row);
      row.forEach((x) => {
        x.target_area__id = x.target_area.area_id;
        if (x.bind_key !== undefined && x.bind_key) {
          if (x.bind_cmd === undefined || x.bind_cmd === "") {
            x.bind_cmd = -1;
          }
          if (x.bind_type === undefined) {
            x.bind_type = -1;
          }
          if (x.bind_id === undefined) {
            x.bind_id = -1;
          }
          if (x.bind_id === undefined) {
            x.bind_id = -1;
          }
          if (x.bind_id == -1) {
            Reflect.deleteProperty(x, "bind_id");
          }
          if (x.interaction !== undefined) {
            Reflect.deleteProperty(x, "interaction");
          }
          let dst_addr_mode = parseInt(x.bind_key.substring(0, 2), 16);
          x.dst_addr_mode = dst_addr_mode;
          if (dst_addr_mode == 0) {
            let dst_ep_id = parseInt(x.bind_key.substring(2, 4), 16);
            x.dst_ep_id = dst_ep_id;
            let dst_dev_id = x.bind_key.substring(12).toString(10);
            x.dst_dev_id = dst_dev_id;
          }
          if (dst_addr_mode == 1) {
            let group_id = parseInt(x.bind_key.substring(4, 8), 16);
            x.group_id = group_id;
          }
          if (dst_addr_mode == 2) {
            let group_id = parseInt(x.bind_key.substring(4, 8), 16);
            x.group_id = group_id;
            let scene_id = parseInt(x.bind_key.substring(8, 12), 16);
            x.scene_id = scene_id;
          }
        }
      });
      let sendData = JSON.parse(JSON.stringify(row));
      sendData = sendData.filter((x) => {
        return x.bind_key !== undefined && x.bind_key !== "";
      });
      const loading = this.$loading({
        lock: true,
        text: "保存,请稍等片刻",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      await Api.update_or_add_bindings2({
        params: {
          sid: this.localSid,
          dev_id: this.currentId,
          bindings: sendData,
        },
      });
      loading.close();
      this.interactionShow = true;
      this.$message({
        showClose: true,
        type: "success",
        message: "保存成功",
      });
    },

    clickstyle({ rowIndex }) {
      if (this.getIndex === rowIndex) {
        return { "background-color": "#ccffff" };
      }
    },

    selectedstyle({ rowIndex }) {
      if (this.getIndex1 === rowIndex) {
        return { "background-color": "#ccffff" };
      }
    },

    tableRowClassName1({ row, rowIndex }) {
      row.index = rowIndex;
    },

    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    rowClick1(row) {
      this.getIndex1 = row.index;
    },
    rowClick(row) {
      this.getIndex = row.index;
    },
  },
};
</script>

<style lang="scss" scoped>
.main-conent-minheight {
  width: 100%;
  height: calc(100vh - 80px);
}

::v-deep .el-card__body {
  margin-left: 30px;
  width: 98%;
  box-sizing: border-box;

  // 下拉搜索框
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }

  input {
    width: 150px;
    height: 30px;
    background-color: #eeeeee;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}
.panel-button {
  cursor: pointer;
}
.panel-button:active {
  background-color: #eeeeee;
  height: 22px;
}

.dot {
  position: absolute;
  top: 50%;
  margin-left: 52px;
  display: flex;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #ffff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.popover1,
.popover2 {
  width: 98%;
  height: 45%;
  border-radius: 5px;
  border: 1px solid rgb(248, 248, 248);
  box-shadow: 0px 5px 10px 0 rgba(102, 156, 255, 0.25);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: content-box;

  .popover1-top,
  .popover1-bottom {
    width: 90%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
  }
}

.panel-area {
  width: 100%;
  height: 280px;
  position: relative;
}
.panels {
  width: 100%;
  height: 130px;
  margin-top: 10px;
  border: 2px solid rgba(102, 156, 255, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.two-panel {
  display: flex;
  justify-content: space-between;
  margin: 10px;
}
.temp {
  width: 150px;
  height: 150px;
  background-color: #fff;
  border: 1px solid rgba(102, 156, 255, 0.25);
  position: absolute;
  top: 50px;
  left: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.set-interaction {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  input {
    background-color: #eeeeee;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .set-interactionTop {
    width: 98%;
    display: flex;
    position: relative;
  }

  .set-interactionTop-left {
    border: 1px solid #e7e7e7;
    color: #34363ce1;
    font-weight: 600;
    padding: 0px 5px 0px 5px;
    border-radius: 6px;
    width: 15%;
    height: 220px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
  }

  .set-interactionTop-center {
    color: #959ca5;
    width: 60%;
    height: 220px;
    padding: 0 20px;
    .txt {
      width: 100%;
      height: 40px;
      display: flex;

      .text1,
      .text2 {
        width: 45%;
        background: #fff;
        display: flex;
      }
    }
  }

  .set-interactionTop-right {
    color: #959ca5;
    width: 25%;
    height: 220px;
    display: flex;
    flex-wrap: wrap;
  }
  .set-interactionBottom {
    width: 98%;
    display: flex;

    /* 去除滚动条 */
    ::v-deep .el-table th.gutter {
      display: none;
      width: 0;
    }
    ::v-deep .el-table colgroup col[name="gutter"] {
      display: none;
      width: 0;
    }
    ::v-deep .el-table__body {
      width: 100% !important;
    }
  }
}
</style>
